<template>
    <div class="spec-content">
        <div class="zw-form-layout">
            <el-form ref="formRef" :model="form" label-width="auto">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="规格名称" prop="attributeName">
                            <el-input v-model="form.attributeName" placeholder="请输规格名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler" v-auth="'spec:view'">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col class="zw-table-btns">
                <el-button type="primary" @click="addHandler" v-auth="'spec:add'"> 新增规格 </el-button>
            </el-col>
        </el-row>
        <el-table :data="tableList" stripe>
            <el-table-column label="规格名称" prop="attributeName"></el-table-column>
            <el-table-column label="规格值" prop="ruleNames">
                <template #default="{ row }">
                    <el-tooltip placement="top">
                        <template #content>
                            <div style="max-width: 480px">{{ row.ruleNames }}</div></template
                        >
                        <div class="custom-tooltip">{{ row.ruleNames }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="{ row }">
                    <el-button class="table-btn" size="small" @click="addHandler(row)" v-auth="'spec:edit'">
                        编辑
                    </el-button>
                    <el-popconfirm
                        placement="top"
                        width="250px"
                        title="确定要删除规格吗？"
                        @confirm="removeHandler(row)"
                        confirm-button-text="确定"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button class="table-btn" size="small" v-auth="'spec:delete'">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination zw-pagination">
            <Pagination
                :total="totalCount"
                :page-size="form.perPage"
                :current-page="form.page"
                @size-change="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
        <EditSpec v-model="show" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue';
import Pagination from '@/components/Pagination.vue';
import EditSpec from './add.vue';
import request from '../../../../request/index';
import { ElMessage } from 'element-plus';

const bus = inject('bus');

const totalCount = ref(0);
const formRef = ref(null);
const form = reactive({
    attributeName: '',
    page: 1,
    perPage: 10
});
let tableList = reactive([]);
let show = ref(false);

/**
 * 分页查询
 */
const queryHandler = async () => {
    const res = await request('getSpecList', form);
    const { list, totalCount: total } = res.data;
    tableList.length = 0;
    tableList.push(
        ...list.map(item => {
            item.ruleNames = item.attr.map(({ attrName }) => attrName).join('；');
            return item;
        })
    );
    totalCount.value = total;
};

/**
 * 搜索
 */
const searchHandler = () => {
    form.page = 1;
    queryHandler();
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    queryHandler();
};

/**
 * 新增/编辑
 * @param {*} row
 */
const addHandler = row => {
    show.value = true;
    bus.emit('spec:edit', row);
};

/**
 * 删除
 * @param {*} row
 */
const removeHandler = async ({ id }) => {
    await request('specDel', { id });
    ElMessage({
        type: 'success',
        message: '删除成功'
    });
    searchHandler();
};

/**
 * 分页
 * @param {*} page
 */
const changePageHandler = page => {
    form.page = page;
    queryHandler();
};

/**
 * 每页记录数修改
 * @param {*} perPage
 */
const changeSizeHandler = perPage => {
    form.page = 1;
    form.perPage = perPage;
    queryHandler();
};

onMounted(async () => {
    searchHandler();
    bus.on('spec:query', queryHandler);
});
</script>
<style lang="scss" scoped>
.spec-content {
    .zw-table-btns {
        text-align: left;
    }
    :deep {
        .el-table {
            color: #33302d;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
            :deep(.el-tabs__item) {
                font-size: 16px !important;
            }

            .el-button--small {
                color: #33302d;
                border: 1px solid #eaeaea;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 12px;
                font-weight: 400;
            }
            .el-button--small + .el-button--small {
                margin-left: 8px;
            }
            .el-table__header-wrapper {
                .el-table__header {
                    .el-table__cell {
                        padding: 12px 0;
                    }
                }
            }
        }
        .el-tabs__nav-wrap {
            margin-bottom: -15px;
            &::after {
                height: 0;
            }
        }
        .el-table .el-table__cell {
            padding: 20px 0;
        }

        .el-table th.el-table__cell {
            padding: 12px 0;
        }

        .el-table th.el-table__cell {
            color: #33302d;
            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 14px;
            font-weight: 500;
        }
    }
    .custom-tooltip {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>
